import { FC, useMemo } from 'react';
import classNames from 'classnames';
import { flatColor, labelColor } from '../constants/color';
import { formatChineseAmount, getStyleColor } from '../utils';
import { TenTrack } from '@/utils/analyze';

export interface SingleQuotationProps {
  data: TenTrack;
  title: string;
  priceName: string;
  volumeName: string;
  totalPriceName: string;
}

const SingleQuotation: FC<SingleQuotationProps> = ({ data, title, priceName, volumeName, totalPriceName }) => {
  const price = useMemo(() => {
    return data?.[priceName];
  }, [data]);

  const isNew = useMemo(() => {
    return !data?.existingLevels?.[price] && !!data?.newlyLevels?.[price];
  }, [data, price]);

  return (
    <div className={classNames('text-sm leading-6')}>
      <span className="inline-block w-12 mr-1" style={{ color: labelColor }}>
        {title}
      </span>
      <span
        className={classNames('inline-block w-20 font-bold mr-1')}
        style={{
          color:
            data?.[priceName] && data?.[priceName] !== '-'
              ? getStyleColor(data?.[priceName], data?.prevClose)
              : flatColor,
        }}
      >
        {data?.[priceName]}
      </span>
      <span className="inline-block w-16 font-bold mr-1">{data?.[volumeName]}</span>
      {/* <span className="inline-block w-20 font-bold" style={{ color: labelColor }}>
        {data?.[volumeName] && data?.[volumeName] !== '-'
          ? formatChineseAmount(data?.[volumeName] * data?.[priceName] * 100)
          : '-'}
      </span> */}
      <span className="inline-block w-20 font-bold" style={{ color: labelColor }}>
        {formatChineseAmount(data?.[totalPriceName])}
      </span>
      <span
        className={classNames('inline-block w-20 mr-1 font-bold', {
          'text-[#4096FF]': !isNew && data?.existingLevels?.[price]?.count >= 0,
          'text-[#FF00FF]': !isNew && data?.existingLevels?.[price]?.count < 0,
          'text-[#FF5500]': isNew,
        })}
      >
        {data?.[priceName] === '-'
          ? '-'
          : !isNew
            ? data?.existingLevels?.[price]?.count >= 0
              ? `+ ${data?.existingLevels?.[price]?.count}`
              : data?.existingLevels?.[price]?.count
            : `+ ${data?.newlyLevels?.[price].count}  N`}
      </span>
      {/* {data?.[priceName] && data?.[priceName] !== '-' && data?.diff?.still?.[priceName]?.success && (
        <span className="inline-block w-20 mr-1">
          <span style={{ color: labelColor }}>成交</span>：
          <span className="font-bold">{data?.diff?.still?.[priceName]?.success}</span>
        </span>
      )}
      {data?.[priceName] && data?.[priceName] !== '-' && data?.diff?.still?.[priceName]?.cancel && (
        <span className="inline-block w-20 mr-1">
          <span style={{ color: labelColor }}>撤销</span>：
          <span className="font-bold">{data?.diff?.still?.[priceName]?.cancel}</span>
        </span>
      )} */}
    </div>
  );
};

export default SingleQuotation;
